<template>
<section @click="clickCurrent('current')" @mousedown="clickCurrent('dragging')">
    <div :class="['custorm--modelbox', 'marketcoupon-show', (custormCurrent == custormIndex)?'drag active':'drag']">
        <div v-if="custormItemData.params.isshow == '2'" class="noshow" v-bind:style="{'background-image':`url(${getPath('noshow.png')})`}"></div>
        <div style="overflow: hidden;" v-if="custormItemData.params.pattern==1">
            <div class="es-coupon-group col-2">
                <div class="es-coupon-col-box" v-bind:style="{'margin-top':custormItemData.style.margincol+'px','margin-bottom': custormItemData.style.margincol + 'px','padding': '0 17px','background':'#ffffff'}">
                    <div class="es-coupon-col-group">
                        <div class="es-coupon-col img-center" v-for="(_citem, _cindex) in custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex" v-bind:style="{'background-image':`url(${getPath('t1.png')})`}">
                            <div class="coupon-box">
                                <div class="coupon-item dis-flex">
                                    <div class="coupon-info-box dis-flex">
                                        <!-- <div class="semicircle left"></div> -->
                                        <div class="coupon-info p-r b-f flex-y-center flex-col">
                                            <div class="col-9-f-24" style="width: 103px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:16px;font-weight:600;">{{coupon_type[`${_citem.coupon_type}`]}}</div>
                                            <div class="coupon-cut col-m p-r">{{_citem.price || (_citem.coupon_type === 40 ? `${_citem.min} - ${_citem.max}` : _citem.coupon_type === 20 ? _citem.discount : _citem.reduce_price)}}<span v-if="_citem.coupon_type == 20" style="font-size: 21px;vertical-align: text-top;">折</span>
                                                <p v-if="_citem.coupon_type !== 20">¥</p>
                                            </div>
                                            <div class="coupon-detail">
                                                <div class="col-9-f-24" style="width: 103px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                                    <couponRender v-if="!_citem.$des_info">
                                                        <template slot="title" v-if="_citem.coupon_type">
                                                            {{`${_citem.rule === 0 ? `${coupon_price[`${_citem.coupon_type}`]['textRule']}${_citem.rule_min_money}元`:''} ${coupon_price[`${_citem.coupon_type}`]['textPrev']}`}}
                                                        </template>
                                                        <template slot="price">
                                                            {{_citem.coupon_type === 40 ? `${_citem.min} - ${_citem.max}` : _citem.coupon_type === 20 ? _citem.discount : _citem.reduce_price}}
                                                        </template>
                                                        <template slot="tail" v-if="_citem.coupon_type">
                                                            {{coupon_price[`${_citem.coupon_type}`]['textLast']}}
                                                        </template>
                                                    </couponRender>
                                                    <span v-else>{{_citem.$des_info}}</span>
                                                </div>
                                               
                                            </div>
                                            
                                        </div>
                                        <!-- <div class="semicircle right"></div> -->
                                    </div>
                                    <div class="coupon-receive f-20" >
                                    <div class="scale">领取</div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <div style="overflow: hidden;" v-if="custormItemData.params.pattern==2">
            <div class="es-coupon-group col-3">
                <div class="es-coupon-col-box" v-bind:style="{'margin-top':custormItemData.style.margincol+'px','margin-bottom': custormItemData.style.margincol + 'px','padding': '0 17px','background':'#ffffff'}">
                    <div class="es-coupon-col-group">
                        <div class="es-coupon-col img-center" v-for="(_citem, _cindex) in custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
                            <div class="coupon-box">
                                <div class="coupon-item dis-flex">
                                    <div class="coupon-info-box dis-flex">
                                        <!-- <div class="semicircle left"></div> -->
                                        <div class="coupon-info p-r b-f flex-y-center flex-col">
                                            <div class="col-9-f-24" style="width: 103px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:16px;font-weight:600;color:#FFFFFF;">{{coupon_type[`${_citem.coupon_type}`]}}</div>
                                            <div class="coupon-cut col-m p-r">{{_citem.price || (_citem.coupon_type === 40 ? `${_citem.min} - ${_citem.max}` : _citem.coupon_type === 20 ? _citem.discount : _citem.reduce_price)}}<span v-if="_citem.coupon_type == 20" style="font-size: 21px;vertical-align: text-top;">折</span>
                                                <p v-if="_citem.coupon_type !== 20">¥</p>
                                            </div>
                                            <div class="coupon-detail">
                                                <div class="col-9-f-24" style="width: 103px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                                    <couponRender v-if="!_citem.$des_info">
                                                        <template slot="title" v-if="_citem.coupon_type">
                                                            {{`${_citem.rule === 0 ? `${coupon_price[`${_citem.coupon_type}`]['textRule']}${_citem.rule_min_money}元`:''} ${coupon_price[`${_citem.coupon_type}`]['textPrev']}`}}
                                                        </template>
                                                        <template slot="price">
                                                            {{_citem.coupon_type === 40 ? `${_citem.min} - ${_citem.max}` : _citem.coupon_type === 20 ? _citem.discount : _citem.reduce_price}}
                                                        </template>
                                                        <template slot="tail" v-if="_citem.coupon_type">
                                                            {{coupon_price[`${_citem.coupon_type}`]['textLast']}}
                                                        </template>
                                                    </couponRender>
                                                    <span v-else>{{_citem.$des_info}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="semicircle right"></div> -->
                                    </div>
                                   <div class="coupon-receive f-20">
                                    <div class="scale">领取</div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <div style="overflow: hidden;" v-if="custormItemData.params.pattern==3">
            <div class="es-coupon-group col-4">
                <div class="es-coupon-col-box" v-bind:style="{'margin-top':custormItemData.style.margincol+'px','margin-bottom': custormItemData.style.margincol + 'px','padding': '0 17px','background':'#ffffff'}">
                    <div class="es-coupon-col-group">
                        <div class="es-coupon-col img-center" v-for="(_citem, _cindex) in custormItemData.data && custormItemData.data.length>0?custormItemData.data:custormItemData.params.defaultData" :key="_cindex">
                            <div class="coupon-box">
                                <div class="coupon-item">
                                    <div class="coupon-info-box dis-flex">
                                        <!-- <div class="semicircle left"></div> -->
                                        <div class="coupon-info p-r b-f flex-y-center flex-col">
                                            <div class="col-9-f-24" style="width: 103px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:16px;font-weight:600;color:#C25A00;">{{coupon_type[`${_citem.coupon_type}`]}}</div>
                                            <div class="coupon-cut col-m p-r">{{_citem.price || (_citem.coupon_type === 40 ? `${_citem.min} - ${_citem.max}` : _citem.coupon_type === 20 ? _citem.discount : _citem.reduce_price)}}<span v-if="_citem.coupon_type == 20" style="font-size: 21px;vertical-align: text-top;">折</span>
                                                <p v-if="_citem.coupon_type !== 20">¥</p>
                                            </div>
                                            <div class="coupon-detail">
                                                <div class="col-9-f-24" style="width: 103px;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                                                    <couponRender v-if="!_citem.$des_info">
                                                        <template slot="title" v-if="_citem.coupon_type">
                                                            {{`${_citem.rule === 0 ? `${coupon_price[`${_citem.coupon_type}`]['textRule']}${_citem.rule_min_money}元`:''} ${coupon_price[`${_citem.coupon_type}`]['textPrev']}`}}
                                                        </template>
                                                        <template slot="price">
                                                            {{_citem.coupon_type === 40 ? `${_citem.min} - ${_citem.max}` : _citem.coupon_type === 20 ? _citem.discount : _citem.reduce_price}}
                                                        </template>
                                                        <template slot="tail" v-if="_citem.coupon_type">
                                                            {{coupon_price[`${_citem.coupon_type}`]['textLast']}}
                                                        </template>
                                                    </couponRender>
                                                    <span v-else>{{_citem.$des_info}}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- <div class="semicircle right"></div> -->
                                    </div>
                                    <div class="coupon-receive f-20">
                                    <div class="scale">领取</div>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- <div
        style="overflow: hidden;"
        v-if="custormItemData.params.rowtype==2"
      >
        <div
          class="es-coupon-group col-3"
          v-bind:style="{'margin-top':custormItemData.style.margincol+'px','margin-bottom':custormItemData.style.margincol+'px'}"
        >
          <div
            class="es-coupon-col"
            v-for="(_citem, _cindex) in custormItemData.params.chooseItemList.length>0?custormItemData.params.chooseItemList:custormItemData.data"
            :key="_cindex"
          >
            <img
              :src="getPath('home_coupon_three_bg.png')"
              alt=""
            >
            <p class="price">￥<span>{{_citem.edit?_citem.edit.price:_citem.cardvalue}}</span></p>
            <p class="condition">满{{_citem.edit?_citem.edit.cordvalue:_citem.fullmoney}}元可用</p>
          </div>
        </div>
      </div> -->
        <div class="btn-edit-del" @click="delCurrent"><span class="btn-del iconfont icon icon-close"></span></div>
    </div>
</section>
</template>

<script>
import defaultConfig from './utils/showConfig'
export default {
  mixins: [defaultConfig.mixins],
  props: {
    defaultConfig: {
      type: Object,
      default: function() {
        return defaultConfig
      }
    }
  },
  data() {
    return {
      coupon_status: {
        '1': '进行中',
        '2': '已失效',
        '3': '已停止'
      },
      coupon_type: {
        10: '满减券',
        20: '折扣券',
        30: '运费券',
        40: '随机券'
      },
      coupon_price: {
        10: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        20: {
          textRule: '满',
          textPrev: '打',
          textLast: '折'
        },
        30: {
          textRule: '满',
          textPrev: '减免',
          textLast: '元'
        },
        40: {
          textRule: '满',
          textPrev: '范围内随机',
          textLast: '元'
        }
      }
    }
  },
  components: {
    couponRender: {
      template: '<span><slot name="title"></slot><span class="text-white"><slot name="price"></slot></span><slot name="tail"></slot></span>'
    }
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.custorm--modelbox.marketcoupon-show {
    .text-white {
        color: #fff;
    }

    .es-coupon-group {
        // padding: 12px 0;
        background: #ffffff;
        overflow: hidden;

        >.es-coupon-col-box {
            font-size: 0;
            width: 9999px;
            white-space: nowrap;
            overflow-y: hidden;

            .es-coupon-col-group {
                display: inline-block;
                overflow: auto;
                overflow-y: hidden;
                width: 363px;

                // padding-bottom: 10px;
                &::-webkit-scrollbar {
                    height: 2px !important;
                }
            }
        }
    }

    .es-coupon-group.col-2 .es-coupon-col {
        margin-right: 15px;
        padding: 10px 14px;
        zoom: .92;
        // background-image: url(../../assets/custorm_style/t1.png);

    }
    .es-coupon-group.col-3 .es-coupon-col {
        margin-right: 15px;
        padding: 10px 32px;
        zoom: .92;
        background-image: url(../../assets/custorm_style/coupon_bg2.png);

    }
    .es-coupon-group.col-4 .es-coupon-col {
        margin-right: 15px;
        padding: 10px 32px;
        zoom: .92;
        background-image: url(../../assets/custorm_style/coupon_bg3.png);

    }

    .es-coupon-group .es-coupon-col {
        display: inline-block;
        white-space: normal;
    }

    .es-coupon-group .es-coupon-col img {
        width: 100%;
        display: block;
    }

    .es-coupon-group.col-2 .es-coupon-col .price {
        position: absolute;
        vertical-align: baseline;
        font-size: 15px;
        top: 3px;
        text-align: center;
        left: 11%;
        right: 35%;
    }

    .es-coupon-group .es-coupon-col .price {
        position: absolute;
        vertical-align: baseline;
        font-size: 15px;
        top: 0;
        left: 50%;
        font-weight: 700;
    }

    .es-coupon-group.col-2 .es-coupon-col .price span {
        font-size: 30px;
    }

    .es-coupon-group .es-coupon-col .price span {
        font-size: 27px;
    }

    .es-coupon-group.col-2 .es-coupon-col .condition {
        position: absolute;
        font-size: 10px;
        top: 62%;
        left: 12%;
        width: 126px;
        -webkit-transform: scale(0.85);
    }

    .es-coupon-group .es-coupon-col .condition {
        position: absolute;
        font-size: 10px;
        top: 35px;
        left: 58%;
        width: 107px;
        -webkit-transform: scale(0.85);
        transform: scale(0.85);
        -webkit-transform: scale(0.8) translateX(-50%);
        transform: scale(0.8) translateX(-50%);
    }

    .es-coupon-group .es-coupon-col .draw {
        position: absolute;
        font-size: 14px;
        top: 12px;
        right: 13%;
        width: 30px;
    }

    .es-coupon-group.col-3 .es-coupon-col {
        width: 45.3%;
    }

    .es-coupon-group.col-3 .es-coupon-col .price {
        left: 25%;
        text-align: center;
        right: 10px;
    }

    .dis-flex {
        display: -webkit-box;
        /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
        display: -moz-box;
        /* Firefox 17- */
        display: -webkit-flex;
        /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
        display: -moz-flex;
        /* Firefox 18+ */
        display: -ms-flexbox;
        /* IE 10 */
        display: flex;
        /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    }

    .p-r {
        position: relative;
    }

    .b-f {
        // background: #fe504f;
    }

    .flex-y-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    // .es-coupon-group.col-2 .es-coupon-col .coupon-box {

    // }
    .es-coupon-group.col-2 .es-coupon-col .coupon-info-box {
        position: relative;
        // width: 80%;
        width: 100%;
        z-index: 2;
        overflow: hidden;
    }
    .es-coupon-group.col-3 .es-coupon-col .coupon-info-box {
        position: relative;
        // width: 80%;
        width: 100%;
        z-index: 2;
        overflow: hidden;
    }
    .es-coupon-group.col-4 .es-coupon-col .coupon-info-box {
        position: relative;
        // width: 80%;
        width: 100%;
        z-index: 2;
        overflow: hidden;
    }

    .es-coupon-group.col-2 .es-coupon-col .semicircle {
        width: 20px;
        height: 75px;
        // background: radial-gradient(5px circle,
        //     transparent,
        //     transparent 9px,
        //     #fe504f 10px);
        // background-repeat: no-repeat;
    }

    .es-coupon-group.col-2 .es-coupon-col .semicircle.left {
        // background-position-x: -12px;
        margin-right: -12px;
        // border-radius: 10px 0 0 10px;
    }

    .es-coupon-group.col-2 .es-coupon-col .semicircle.right {
        // background-position-x: 12px;
        margin-left: -12px;
        // border-radius: 0 10px 10px 0;
    }

    .es-coupon-group.col-2 .es-coupon-col .coupon-info {
        /* border-radius: 20upx; */
        width: 100%;
        height: 75px;
        overflow: hidden;
        padding: 5px 0;
        box-sizing: content-box;
    }
    .es-coupon-group.col-3 .es-coupon-col .coupon-info {
        /* border-radius: 20upx; */
        width: 100%;
        height: 75px;
        overflow: hidden;
        padding: 5px 0;
        box-sizing: content-box;
    }
    .es-coupon-group.col-4 .es-coupon-col .coupon-info {
        /* border-radius: 20upx; */
        width: 100%;
        height: 100px;
        overflow: hidden;
        padding: 5px 0;
        box-sizing: content-box;
    }
    .es-coupon-group.col-2 .es-coupon-col .coupon-cut {
        min-width: 64px;
        white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        color: rgb(253, 80, 78);
        padding: 0 17px;
        // border-right: 1px solid #eeeeee;
    }
     .es-coupon-group.col-3 .es-coupon-col .coupon-cut {
        min-width: 64px;
        white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        // color: rgb(253, 80, 78);
        color: #ffffff;
        padding: 0 17px;
        // border-right: 1px solid #eeeeee;
    }
     .es-coupon-group.col-4 .es-coupon-col .coupon-cut {
        min-width: 64px;
        white-space: nowrap;
        // text-overflow: ellipsis;
        // overflow: hidden;
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        // color: rgb(253, 80, 78);
        color: #C25A00;
        padding: 0 17px;
        // border-right: 1px solid #eeeeee;
    }

    .es-coupon-group.col-2 .es-coupon-col .coupon-cut p {
        position: absolute;
        top: 0.3em;
        left: 4px;
        font-size: 18px;
        font-weight: bold;
    }
    .es-coupon-group.col-3 .es-coupon-col .coupon-cut p {
        position: absolute;
        top: 0.3em;
        left: 4px;
        font-size: 18px;
        font-weight: bold;
    }
    .es-coupon-group.col-4 .es-coupon-col .coupon-cut p {
        position: absolute;
        top: 0.3em;
        left: 4px;
        font-size: 18px;
        font-weight: bold;
    }

    .es-coupon-group.col-2 .es-coupon-col .coupon-detail {
        padding: 0 5px;
        color: #c3c3c3;
    }
    .es-coupon-group.col-3 .es-coupon-col .coupon-detail {
        padding: 0 5px;
        color: #FFFFFF;
    }
    .es-coupon-group.col-4 .es-coupon-col .coupon-detail {
        padding: 0 5px;
        color: #C25A00;
    }

    .es-coupon-group.col-2 .es-coupon-col .coupon-detail .col-9-f-24 {
        font-size: 12px;
    }
    .es-coupon-group.col-3 .es-coupon-col .coupon-detail .col-9-f-24 {
        font-size: 12px;
    }
    .es-coupon-group.col-4 .es-coupon-col .coupon-detail .col-9-f-24 {
        font-size: 12px;
    }

    .es-coupon-group.col-2 .es-coupon-col .coupon-receive {
        width: 3em;
        font-size: 16px;
        border-radius: 0 10px 10px 0;
        color: #ff4444;
        // background: #de3332;
        padding: 3px 5px 0 18px;
        margin-left: -12px;
        position: relative;
        right:-18px;
        top:14px;
        z-index: 1;
        box-sizing: border-box;

        .scale {
            transform: scale(.8);
        }
    }
    .es-coupon-group.col-3 .es-coupon-col .coupon-receive {
        font-size: 16px;
        border-radius: 0 10px 10px 0;
        color: #ff4444;
        // background: #de3332;
        padding: 3px 5px 0 18px;
        margin-left: -12px;
        position: relative;
        right:-38px;
        top:14px;
        z-index: 1;
        box-sizing: border-box;

        .scale {
            transform: scale(.8);
        }
    }
    .es-coupon-group.col-4 .es-coupon-col .coupon-receive {
        width: 6em;
        font-size: 16px;
        border-radius:10px;
        color: #D68413;
        border: 1px solid #D68413;
        text-align: center;
        // background: #de3332;
        // padding: 3px 5px 0 18px;
        padding: 2px;
        margin-left: -12px;
        position: relative;
        z-index: 1;
        box-sizing: border-box;
        margin-left: 12px;

        .scale {
            transform: scale(.8);
        }
    }
}
</style>
